<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
      <meta http-equiv="refresh">
      <title>登录</title>
      <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
      <script>
        $(function () {
            $('#btnLogin').click(function () {
                //1.获取用户名、密码
                username=$('#username').val()
                password=$('#password').val()
                //2.发起post ajax请求，/login_ajax_check,携带用户名和密码
                $.ajax({
                    url:"/login_check",
                    data:{username:username,password:password},
                    async:true,
                    cache:false,
                    type:"POST",
                    success:function(result){
                        //alert(result.code);
                        if(result.code==200){
                            $(location).attr('href', '/');
                        }else{
                            alert(result.msg);
                            return false;
                        }
                    }
                });
            })
        })
    </script>
      <style type="text/css">
        body{//清除样式,设置字体和背景
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: #34495e;
            color:white;
        }
        .box{
            width: 300px;
            padding: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #191919;
            text-align: center;
        }
        .box h1{
            color: white;
            text-transform: uppercase;
            font-weight: 500;
        }
        .box input[type ="text"],.box input[type="password"]{
            border: 0;
            background: none;
            display: block;
            margin: 20px auto;
            text-align: center;
            border: 2px solid #3498db;
            padding: 14px 10px;
            width: 200px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
        }
        .box input[type ="text"]:focus,.box input[type="password"]:focus {
            width: 280px;
            border-color: #2ecc71;
        }
        .box input[type="button"]{
            border: 0;
            background: none;
            display: block;
            margin: 20px auto;
            float: left;
            text-align: center;
            border: 2px solid #2ecc71;
            padding: 14px 30px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
            cursor: pointer;
        }
       .box input[type="reset"]{
            border: 0;
            background: none;
            display: block;
            margin: 20px auto;
            float: right;
            text-align: center;
            border: 2px solid #2ecc71;
            padding: 14px 30px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
            cursor: pointer;
        }
        .box input[type="button"]:hover{
            background:#2ecc71 ;
        }
        .box input[type="reset"]:hover{
            background:#2ecc71 ;
        }
        .box span{
            color:red;
        }
        #errmsg{
            display: none;
            color: red;
        }
    </style>

</head>


<body>


    <div id="app">

        <form class="box">
            <h1>登录</h1>
            <div th:if="${session.SPRING_SECURITY_CONTEXT != null}">
            已登录：
            <span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></span>
        </div>
            <div th:if="${session.SPRING_SECURITY_CONTEXT == null}">
                <span >状态：未登录</span>
            </div>
            <input type="text" id="username" placeholder="Enter the Username">
            <input type="password" id="password" placeholder="Enter the Password">
            <input type="button" id="btnSignin" onclick="location.href='/regist'"  value="注册">
            <input type="button" id="btnLogin" value="登录">

            <input type="reset" @click="login" value="重置">
        </form>
    </div>

    <div id="errmsg"></div>
</body>
</html>
